<template>
	<!-- 闪电送 -->
	<scroll-view scroll-y class="scrollSty" @scrolltolower="scrolltolowerFnc">
		<view class="lightningSonde-main">
			<!-- 门店地址定位 -->
			<view class="lightningSonde-site-main">
				<view class="lightningSonde-site">
					<view class="site" @click="gotoPath('/pages/selectAddress/selectAddress')">
						<u-icon name="map" color="#fff" size="20" style="display: inline-block; margin-right: 4px"></u-icon>
						<text class="addressName">
							{{ addressInfo.name || '暂无信息' }}
						</text>
						<u-icon name="arrow-right" color="#fff" size="16" style="display: inline-block; margin-left: 4px"></u-icon>
					</view>
					<view class="site-title">
						<u-icon name="car" color="#fff" size="24" style="display: inline-block; margin-right: 4px"></u-icon>
						<text>最快28分钟送达</text>
					</view>
				</view>

				<view class="lightningSonde-siteNone-box" v-if="flashListData.length == 0">
					<view class="siteNone-box">
						<view class="siteNone-box-left">
							<image
								src="https://test-zyxx-img.oss-cn-shenzhen.aliyuncs.com/uploads/20241201/d8bf25312a952dcbc56dde01adebc785.png"
								mode="widthFix"
								style="width: 120rpx; height: 120rpx; border-radius: 50%"
							></image>
						</view>
						<view class="siteNone-box-right">
							<view class="titleNone">很抱歉，您所在的地址暂未开通闪电送服务，您可以选择去全国送购买，全国送为全国快递配送发货，同城最快1小时送达</view>
							<view class="btn">
								<u-button
									color="#e43927"
									size="small"
									:plain="true"
									shape="circle"
									text="使用历史地址"
									@click="gotoPath('/pages/selectAddress/selectAddress')"
								></u-button>
								<u-button type="primary" color="#e43927" size="small" shape="circle" text="前往全国送" @click="gotoPath('/pages/shopping/shopping')"></u-button>
							</view>
						</view>
					</view>
				</view>

				<view class="storeContentMain" v-else>
					<view class="storeContent">
						<hwxcBrand v-for="(item, index) in flashListData" :key="item.id" :cloudStoreInfo="item" brandType="1" :lng="flashQuery.lng" :lat="flashQuery.lat" />
					</view>
				</view>
			</view>

			<!-- 查看开通闪电送门店 -->
			<view class="look-lightningSonde">
				<view class="look-lightningSonde-box" @click="gotoPath(`/pages/storeList/storeList?lng=${flashQuery.lng}&lat=${flashQuery.lat}`)">
					<view class="look-lightningSonde-title">
						查看已开通
						<text class="titleB">闪电送</text>
						服务门店
					</view>
					<view class="look-lightningSonde-icon">
						<u-icon name="arrow-right" color="#000" size="16"></u-icon>
					</view>
				</view>
			</view>

			<!-- 推荐商品 -->
			<view class="recommendedGoods-main">
				<view class="recommendedGoods-title">
					<text class="zw"></text>
					<text class="title">为您推荐全国配送商品</text>
					<text class="zw"></text>
				</view>

				<view class="recommendedGoods-shopList">
					<hwxcShopItem :shopList="shopListData" shopType="0" />
				</view>
			</view>
			
			<hwxcTabbar/>
		</view>
	</scroll-view>
</template>

<script>
import hwxcShopItem from '../../components/hwxcShopItem/hwxcShopItem.vue';
import hwxcTabbar from '../../components/hwxcTabbar.vue';
import { homeGoodsList } from '../../api/home/index.js';
import { flashlist } from '../../api/flash/index.js';
import hwxcBrand from '../../components/hwxcBrand/hwxcBrand.vue';
import amapFile from '../../utils/amap-wx.130.js';
import { imageUrl } from '../../utils/tools';
export default {
	data() {
		return {
			// 商品数据
			shopListData: null,
			// 商品参数
			shopQuery: {
				page: 1,
				limit: 10,
				category_id: '',
				type: '0',
				store_id: '0'
			},
			// 门店请求参数
			flashQuery: {
				lng: null,
				lat: null
			},
			flashListData: [],
			addressInfo: {}
		};
	},

	components: {
		hwxcShopItem,
		hwxcBrand,
		hwxcTabbar
	},

	onShareAppMessage() {
		return {
			title: '闪电送',
			path: 'pages/lightningSonde/lightningSonde'
		};
	},

	onShareTimeline() {
		return {
			title: '闪电送',
			query: 'pages/lightningSonde/lightningSonde'
		};
	},

	async onShow() {
		let userAddressInfo = this.$store.state.userAddressInfo;
		if (userAddressInfo) {
			this.addressInfo = userAddressInfo;
			const location = userAddressInfo.location.split(',');
			this.flashQuery.lng = location[0];
			this.flashQuery.lat = location[1];
			this.getflashlist();
		} else {
			var myAmapFun = new amapFile.AMapWX({ key: '858bf93b69c073e6d292c9f328ad0c80' });
			myAmapFun.getRegeo({
				success: (res) => {
					this.flashQuery.lng = res[0].longitude;
					this.flashQuery.lat = res[0].latitude;
					this.addressInfo = res[0];
					this.$store.dispatch('getuserInfoAsync', this.addressInfo);
					this.getflashlist();
				},
				fail: (info) => {
					// uni.showModal({ title: '温馨提示', content: '地址信息获取失败，请先授权~' });
				}
			});
		}
		await this.getHomeGoodsList();
	},

	methods: {
		// 获取门店列表
		async getflashlist() {
			try {
				const resData = await flashlist(this.flashQuery);
				let list = resData.data;

				if (list.length > 0) {
					list.forEach((item) => {
						item.product.forEach((jitem) => {
							jitem.price = jitem.price ? jitem.price : jitem.saleprice;
						});
					});

					this.flashListData = list.filter((item) => {
						return item.product.length > 0;
					});
				}
			} catch (e) {
				throw Error(e);
			}
		},

		gotoPath(path) {
			uni.navigateTo({
				url: path
			});
		},

		// 获取商品数据
		async getHomeGoodsList() {
			try {
				const resData = await homeGoodsList(this.shopQuery);
				let list = resData.data.data || [];
				const shopListData = [...(this.shopListData || []), ...list];
				shopListData.forEach((item) => {
					item.image = imageUrl(item.fileUrl);
				});
				this.shopListData = shopListData;
			} catch (e) {
				throw Error(e);
			}
		},

		// 触底刷新
		scrolltolowerFnc() {
			this.shopQuery.page++;
			this.getHomeGoodsList();
		}
	}
};
</script>

<style>
page {
	display: flex;
	flex-direction: column;
	height: 100%;
}
</style>

<style scoped lang="scss">
.scrollSty {
	flex: 1;
	overflow: scroll;
}
.lightningSonde-main {
	.lightningSonde-site-main {
		position: relative;
		.lightningSonde-site {
			display: flex;
			justify-content: space-between;
			color: #fff;
			background-color: #e43927;
			box-sizing: border-box;
			padding: 20rpx;
			height: 140rpx;
			font-size: 28rpx;
			.site {
				display: flex;
				height: 40rpx;
				align-items: flex-end;
				.addressName {
					display: inline-block;
					max-width: 100px;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					font-size: 26rpx;
				}
			}
			.site-title {
				display: flex;
				height: 40rpx;
				align-items: normal;
				font-size: 28rpx;
			}
		}

		.storeContentMain {
			box-sizing: border-box;
			padding: 0px 20rpx;
			margin-top: -80rpx;
			margin-bottom: 20rpx;
			.storeContent {
			}
		}

		.lightningSonde-siteNone-box {
			width: 100%;
			margin-top: -60rpx;
			box-sizing: border-box;
			padding: 0px 20rpx;
			margin-bottom: 20rpx;
			.siteNone-box {
				background-color: #fff;
				border-radius: 24rpx;
				height: 300rpx;
				display: flex;
				box-sizing: border-box;
				padding: 30rpx;
				.siteNone-box-left {
					width: 140rpx;
				}
				.siteNone-box-right {
					flex: 1;
					.btn {
						display: flex;
						justify-content: flex-start;
						gap: 50rpx;
						margin: 40rpx 0px;
					}

					.titleNone {
						font-size: 26rpx;
						color: #444;
						line-height: 1.8;
					}
				}
			}
		}
	}

	.look-lightningSonde {
		box-sizing: border-box;
		padding: 0px 20rpx;
		.look-lightningSonde-box {
			background-color: #fff;
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 90rpx;
			box-sizing: border-box;
			padding: 0px 24rpx;
			border-radius: 24rpx;
			font-size: 27rpx;
			color: #888;
			.titleB {
				color: #e43927;
				margin: 0px 20rpx;
			}
		}
	}

	.advertisingSpace-main {
		box-sizing: border-box;
		padding: 0px 20rpx;
		.advertisingSpace {
			height: 240rpx;
			background-color: #fff;
			border-radius: 24rpx;
			margin-top: 20rpx;
		}
	}

	.recommendedGoods-main {
		box-sizing: border-box;
		padding: 0px 20rpx;
		.recommendedGoods-title {
			height: 100rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #666;
			font-size: 26rpx;
			width: 100%;
			.zw {
				display: inline-block;
				height: 2rpx;
				width: 100rpx;
				margin: 0px 40rpx;
				background-color: #999;
			}
		}

		.recommendedGoods-shopList {
			padding-bottom: 20rpx;
		}
	}
}
</style>
